

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Blog - React</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="Blog - React">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://facebook.github.io/react/blog/page3/">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="A JavaScript library for building user interfaces">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/react/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="//cdn.bootcss.com/docsearch.js/1.3.0/docsearch.min.css" />
  <link rel="stylesheet" href="/react/css/syntax.css">
  <link rel="stylesheet" href="/react/css/codemirror.css">
  <link rel="stylesheet" href="/react/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
  <![endif]-->

  <script src="//cdn.bootcss.com/docsearch.js/1.5.0/docsearch.min.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/codemirror.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/javascript/javascript.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/xml/xml.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/jsx/jsx.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react.min.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
  <script src="//cdn.bootcss.com/babel-standalone/6.15.0/babel.min.js"></script>

  <script src="/react/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/react/">
      <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/react/docs/hello-world.html">Docs</a></li>
        <li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/react/community/support.html">Community</a></li>
        <li><a href="/react/blog/" class="active">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v15.5.4</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap blogContent">
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
    <ul>
      
        <li><a href="/react/blog/2017/04/07/react-v15.5.0.html">React v15.5.0</a></li>
      
        <li><a href="/react/blog/2016/11/16/react-v15.4.0.html">React v15.4.0</a></li>
      
        <li><a href="/react/blog/2016/09/28/our-first-50000-stars.html">Our First 50,000 Stars</a></li>
      
        <li><a href="/react/blog/2016/08/05/relay-state-of-the-state.html">Relay: State of the State</a></li>
      
        <li><a href="/react/blog/2016/07/22/create-apps-with-no-configuration.html">Create Apps with No Configuration</a></li>
      
        <li><a href="/react/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a></li>
      
        <li><a href="/react/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a></li>
      
        <li><a href="/react/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a></li>
      
        <li><a href="/react/blog/2016/04/07/react-v15.html">React v15.0</a></li>
      
        <li><a href="/react/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
      
      <li><a href="/react/blog/all.html">All posts ...</a></li>
    </ul>
  </div>
</div>

  <div class="inner-content">
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/03/16/react-v15-rc2.html">React v15.0 Release Candidate 2</a>

</h1>

<p class="meta">
  March 16, 2016
  by
  
    
      <a href="https://twitter.com/zpao">Paul O’Shannessy</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Today we&#39;re releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.</p>

<p>The most pressing change that was made is to fix a bug in our new code that removes <code>&lt;span&gt;</code>s, as discussed in the original RC1 post. Specifically we have some code that takes a different path in IE11 and Edge due to the speed of some DOM operations. There was a bug in this code which didn&#39;t break out of the optimization for <code>DocumentFragment</code>s, resulting in text not appearing at all. Thanks to the several people who <a href="https://github.com/facebook/react/issues/6246">reported this</a>.</p>

<p>The other change is to our SVG code. In RC1 we had made the decision to pass through all attributes directly. This led to <a href="https://github.com/facebook/react/issues/6211">some confusion with <code>class</code> vs <code>className</code></a> and ultimately led us to reconsider our position on the approach. Passing through all attributes meant that we would have two different patterns for using React where things like hyphenated attributes would work for SVG but not HTML. In the future, we <em>might</em> change our approach to the problem for HTML as well but in the meantime, maintaining consistency is important. So we reverted the changes that allowed the attributes to be passed through and instead expanded the SVG property list to include all attributes that are in the spec. We believe we have everything now but definitely <a href="https://github.com/facebook/react/issues/1657#issuecomment-197031403">let us know</a> if we missed anything. It was and still is our intent to support the full range of SVG tags and attributes in this release.</p>

<p>Thanks again to everybody who has tried the RC1 and reported issues. It has been extremely important and we wouldn&#39;t be able to do this without your help!</p>

<h2>Installation</h2>

<p>We recommend using React from <code>npm</code> and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:</p>

<ul>
<li><code>npm install --save react@15.0.0-rc.2 react-dom@15.0.0-rc.2</code></li>
</ul>

<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the <code>NODE_ENV</code> environment variable to <code>production</code> to use the production build of React which does not include the development warnings and runs significantly faster.</p>

<p>If you can’t use <code>npm</code> yet, we provide pre-built browser builds for your convenience, which are also available in the <code>react</code> package on bower.</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-15.0.0-rc.2.js">https://fb.me/react-15.0.0-rc.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-15.0.0-rc.2.min.js">https://fb.me/react-15.0.0-rc.2.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-15.0.0-rc.2.js">https://fb.me/react-with-addons-15.0.0-rc.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-15.0.0-rc.2.min.js">https://fb.me/react-with-addons-15.0.0-rc.2.min.js</a><br></li>
<li><strong>React DOM</strong> (include React in the page before React DOM)<br>
Dev build with warnings: <a href="https://fb.me/react-dom-15.0.0-rc.2.js">https://fb.me/react-dom-15.0.0-rc.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-dom-15.0.0-rc.2.min.js">https://fb.me/react-dom-15.0.0-rc.2.min.js</a><br></li>
</ul>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/03/07/react-v15-rc1.html">React v15.0 Release Candidate</a>

</h1>

<p class="meta">
  March  7, 2016
  by
  
    
      <a href="https://twitter.com/zpao">Paul O’Shannessy</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Sorry for the small delay in releasing this. As we said, we&#39;ve been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood <abbr title="You didn't think we would actually spoil anything did you?">████████████████████████████████████</abbr>. WOW!</p>

<p>But now we&#39;re ready, so without further ado, we&#39;re shipping a release candidate for React v15 now. As a reminder, <a href="/react/blog/2016/02/19/new-versioning-scheme.html">we&#39;re switching to major versions</a> to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we&#39;ll continue to follow semver like we&#39;ve been doing since 2013. It&#39;s also worth noting that <a href="/react/blog/2016/01/12/discontinuing-ie8-support.html">we no longer actively support Internet Explorer 8</a>. We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.</p>

<p>Please try it out before we publish the final release. Let us know if you run into any problems by filing issues on our <a href="https://github.com/facebook/react">GitHub repo</a>.</p>

<h2>Upgrade Guide</h2>

<p>Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.</p>

<p>If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We&#39;ve also laid some groundwork in the core to bring you some new capabilities in future releases.</p>

<p>See the changelog below for more details.</p>

<h2>Installation</h2>

<p>We recommend using React from <code>npm</code> and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:</p>

<ul>
<li><code>npm install --save react@15.0.0-rc.1 react-dom@15.0.0-rc.1</code></li>
</ul>

<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the <code>NODE_ENV</code> environment variable to <code>production</code> to use the production build of React which does not include the development warnings and runs significantly faster.</p>

<p>If you can’t use <code>npm</code> yet, we provide pre-built browser builds for your convenience, which are also available in the <code>react</code> package on bower.</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-15.0.0-rc.1.js">https://fb.me/react-15.0.0-rc.1.js</a><br>
Minified build for production: <a href="https://fb.me/react-15.0.0-rc.1.min.js">https://fb.me/react-15.0.0-rc.1.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-15.0.0-rc.1.js">https://fb.me/react-with-addons-15.0.0-rc.1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-15.0.0-rc.1.min.js">https://fb.me/react-with-addons-15.0.0-rc.1.min.js</a><br></li>
<li><strong>React DOM</strong> (include React in the page before React DOM)<br>
Dev build with warnings: <a href="https://fb.me/react-dom-15.0.0-rc.1.js">https://fb.me/react-dom-15.0.0-rc.1.js</a><br>
Minified build for production: <a href="https://fb.me/react-dom-15.0.0-rc.1.min.js">https://fb.me/react-dom-15.0.0-rc.1.min.js</a><br></li>
</ul>

<h2>Changelog</h2>

<h3>Major changes</h3>

<ul>
<li><h4><code>document.createElement</code> is in and <code>data-reactid</code> is out</h4>

<p>There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the <code>data-reactid</code> attribute for each DOM node. While this will make it much more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use <code>document.createElement</code> on initial render. Previously we would generate a large string of HTML and then set <code>node.innerHTML</code>. At the time, this was decided to be faster than using <code>document.createElement</code> for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using <code>createElement</code> we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we&#39;ve all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.</p></li>
<li><h4>No more extra <code>&lt;span&gt;</code>s</h4>

<p>Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra <code>&lt;span&gt;</code>s. Eg, in our most basic example on the home page we render <code>&lt;div&gt;Hello {this.props.name}&lt;/div&gt;</code>, resulting in markup that contained 2 <code>&lt;span&gt;</code>s. Now we&#39;ll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it&#39;s likely you are not impacted. However if you were targeting these <code>&lt;span&gt;</code>s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.</p></li>
<li><h4>Rendering <code>null</code> now uses comment nodes</h4>

<p>We&#39;ve also made use of these comment nodes to change what <code>null</code> renders to. Rendering to <code>null</code> was a feature we added in React v0.11 and was implemented by rendering <code>&lt;noscript&gt;</code> elements. By rendering to comment nodes now, there&#39;s a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of <code>:nth-child</code> selectors. This, along with the other changes mentioned above, have always been considered implementation details of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.</p></li>
<li><h4>Improved SVG support</h4>

<p>All SVG tags and attributes are now fully supported. (Uncommon SVG tags are not present on the <code>React.DOM</code> element helper, but JSX and <code>React.createElement</code> work on all tag names.) All SVG attributes match their original capitalization and hyphenation as defined in the specification (ex: <code>gradientTransform</code> must be camel-cased but <code>clip-path</code> should be hyphenated).</p></li>
</ul>

<h3>Breaking changes</h3>

<p>It&#39;s worth calling out the DOM structure changes above again, in particular the change from <code>&lt;span&gt;</code>s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using <code>ReactDOM.renderToStaticMarkup</code> and comparing markup. Again, there were a very small number of changes that had to be made, but we don&#39;t want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use <code>&lt;span&gt;</code>s in your <code>render</code> method.</p>

<p>These deprecations were introduced in v0.14 with a warning and the APIs are now removed.</p>

<ul>
<li>Deprecated APIs removed from <code>React</code>, specifically <code>findDOMNode</code>, <code>render</code>, <code>renderToString</code>, <code>renderToStaticMarkup</code>, and <code>unmountComponentAtNode</code>.</li>
<li>Deprecated APIs removed from <code>React.addons</code>, specifically <code>batchedUpdates</code> and <code>cloneWithProps</code>.</li>
<li>Deprecated APIs removed from component instances, specifically <code>setProps</code>, <code>replaceProps</code>, and <code>getDOMNode</code>.</li>
</ul>

<h3>New deprecations, introduced with a warning</h3>

<p>Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.</p>

<ul>
<li><code>LinkedStateMixin</code> and <code>valueLink</code> are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: <a href="https://www.npmjs.com/package/react-linked-input">react-linked-input</a>.</li>
</ul>

<h3>New helpful warnings</h3>

<ul>
<li>If you use a minified copy of the <em>development</em> build, React DOM kindly encourages you to use the faster production build instead.</li>
<li>React DOM: When specifying a unit-less CSS value as a string, a future version will not add <code>px</code> automatically. This version now warns in this case (ex: writing <code>style={{width: &#39;300&#39;}}</code>. (Unitless <em>number</em> values like <code>width: 300</code> are unchanged.)</li>
<li>Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.</li>
<li>Elements will now warn when attempting to read <code>ref</code> and <code>key</code> from the props.</li>
<li>React DOM now attempts to warn for mistyped event handlers on DOM elements (ex: <code>onclick</code> which should be <code>onClick</code>)</li>
</ul>

<h3>Notable bug fixes</h3>

<ul>
<li>Fixed multiple small memory leaks</li>
<li>Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.</li>
<li>React DOM now supports the <code>cite</code> and <code>profile</code> HTML attributes.</li>
<li>React DOM now supports the <code>onAnimationStart</code>, <code>onAnimationEnd</code>, <code>onAnimationIteration</code>, <code>onTransitionEnd</code>, and <code>onInvalid</code> events. Support for <code>onLoad</code> has been added to <code>object</code> elements.</li>
<li><code>Object.is</code> is used in a number of places to compare values, which leads to fewer false positives, especially involving <code>NaN</code>. In particular, this affects the <code>shallowCompare</code> add-on.</li>
<li>React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: <code>href={null}</code>) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.</li>
</ul>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/02/19/new-versioning-scheme.html">New Versioning Scheme</a>

</h1>

<p class="meta">
  February 19, 2016
  by
  
    
      <a href="https://twitter.com/sebmarkbage">Sebastian Markbåge</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Today we&#39;re announcing that we&#39;re switching to major revisions for React. The current version is 0.14.7. The next release will be: <strong>15.0.0</strong></p>

<p>This change shouldn&#39;t materially affect most of you. Moving to major semver versions simply helps indicate our commitment to stability and gives us the flexibility to add new backwards-compatible features in minor releases. This means we can have fewer major releases and you won&#39;t have to wait as long to take advantage of improvements to React. Plus, if you&#39;re a component author, this versioning scheme gives you the flexibility to support two major versions of React at the same time so you don&#39;t need to leave anyone behind.</p>

<p>The core of the React API has been stable for years. Our business as well as many of yours all depend heavily on the use of React as a core piece of our infrastructure. We&#39;re committed to the stability as well as the progress of React going forward.</p>

<h2>Bring Everyone Along</h2>

<p>React isn&#39;t just a library but an ecosystem. We know that your applications and ours are not just isolated islands of code. It is a network of your own application code, your own open source components and third party libraries that all depend on React.</p>

<p><img src="/react/img/blog/versioning-1.png" width="403"></p>

<p>Therefore it is important that we don&#39;t just upgrade our own codebases but that we bring our whole community with us. We take the upgrade path very seriously - for everyone.</p>

<p><img src="/react/img/blog/versioning-poll.png" width="596"></p>

<h2>Introducing Minor Releases</h2>

<p>Ideally everyone could just depend on the latest version of React all the time.</p>

<p><img src="/react/img/blog/versioning-2.png" width="463"></p>

<p>We know that in practice that is not possible. In the future, we expect more new additive APIs rather than breakage of existing ones. By moving to major revisions in the semver scheme, we can release new versions without breaking existing ones.</p>

<p><img src="/react/img/blog/versioning-3.png" width="503"></p>

<p>That means that if one component needs a new API, there is no need for any of the other components to do any further work. They remain compatible.</p>

<h2>What Happened to 1.0.0?</h2>

<p>Part of React&#39;s growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. There are too many preconceived notions of what v1.0 is. We&#39;re still following semver. We&#39;re just communicating stability by moving the 0 from the beginning to the end.</p>

<h2>Breaking Changes</h2>

<p>Minor revision releases will include deprecation warnings and tips for how to upgrade an API or pattern that will be removed or changed in the future.</p>

<p>We will continue to release <a href="https://www.youtube.com/watch?v=d0pOgY8__JM">codemods</a> for common patterns to make automatic upgrades of your codebase easier.</p>

<p>Once we&#39;ve reached the end of life for a particular major version, we&#39;ll release a new major version where all deprecated APIs have been removed.</p>

<h2>Avoiding The Major Cliff</h2>

<p>If you try to upgrade your component to 16.0.0 you might find that your application no longer works if you still have other dependencies. E.g. if Ryan&#39;s and Jed&#39;s components are only compatible with 15.x.x.</p>

<p><img src="/react/img/blog/versioning-4.png" width="498"></p>

<p>Worst case, you revert back to 15.1.0 for your application. Since you&#39;ll want to use your component, you might also revert that one.</p>

<p><img src="/react/img/blog/versioning-5.png" width="493"></p>

<p>Of course, Ryan and Jed think the same way. If we&#39;re not careful, we can hit a cliff where nobody upgrades. This has happened to many software project ecosystems in the past.</p>

<p>Therefore, we&#39;re committed to making it easy for most components and libraries built on top of React to be compatible with two major versions at the same time. We will do this by introducing new APIs before completely removing the old ones, thereby avoiding those cliffs.</p>

<p><img src="/react/img/blog/versioning-6.png" width="493"></p>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/01/12/discontinuing-ie8-support.html">Discontinuing IE 8 Support in React DOM</a>

</h1>

<p class="meta">
  January 12, 2016
  by
  
    
      <a href="http://benalpert.com">Ben Alpert</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn&#39;t have to worry about most browser bugs.</p>

<p>Today, Microsoft <a href="https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support">discontinued support for older versions of IE</a>. Starting with React v15, we&#39;re discontinuing React DOM&#39;s support for IE 8. We&#39;ve heard that most React DOM apps already don&#39;t support old versions of Internet Explorer, so this shouldn&#39;t affect many people. This change will help us develop faster and make React DOM even better. (We won&#39;t actively remove IE 8–related code quite yet, but we will deprioritize new bugs that are reported. If you need to support IE 8 we recommend you stay on React v0.14.)</p>

<p>React DOM will continue to support IE 9 and above for the foreseeable future.</p>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a>

</h1>

<p class="meta">
  January  8, 2016
  by
  
    
      <a href="http://www.jimsproch.com">Jim Sproch</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>The documentation for <code>componentWillReceiveProps</code> states that <code>componentWillReceiveProps</code> will be invoked when the props change as the result of a rerender. Some people assume this means &quot;if <code>componentWillReceiveProps</code> is called, then the props must have changed&quot;, but that conclusion is logically incorrect.</p>

<p>The guiding principle is one of my favorites from formal logic/mathematics:</p>

<blockquote>
<p>A implies B does not imply B implies A</p>
</blockquote>

<p>Example: &quot;If I eat moldy food, then I will get sick&quot; does not imply &quot;if I am sick, then I must have eaten moldy food&quot;. There are many other reasons I could be feeling sick. For instance, maybe the flu is circulating around the office. Similarly, there are many reasons that <code>componentWillReceiveProps</code> might get called, even if the props didn’t change.</p>

<p>If you don’t believe me, call <code>ReactDOM.render()</code> three times with the exact same props, and try to predict the number of times <code>componentWillReceiveProps</code> will get called:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">Component</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
  <span class="nx">componentWillReceiveProps</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;componentWillReceiveProps&#39;</span><span class="p">,</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">bar</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">Bar</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">bar</span><span class="p">}</span><span class="o">!&lt;</span><span class="err">/div&gt;;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="kd">var</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;container&#39;</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">mydata</span> <span class="o">=</span> <span class="p">{</span><span class="nx">bar</span><span class="o">:</span> <span class="s1">&#39;drinks&#39;</span><span class="p">};</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
</code></pre></div>
<p>In this case, the answer is &quot;2&quot;. React calls <code>componentWillReceiveProps</code> twice (once for each of the two updates). Both times, the value of &quot;drinks&quot; is printed (ie. the props didn’t change).</p>

<p>To understand why, we need to think about what <em>could</em> have happened. The data <em>could</em> have changed between the initial render and the two subsequent updates, if the code had performed a mutation like this:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">mydata</span> <span class="o">=</span> <span class="p">{</span><span class="nx">bar</span><span class="o">:</span> <span class="s1">&#39;drinks&#39;</span><span class="p">};</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">mydata</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="s1">&#39;food&#39;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">mydata</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="s1">&#39;noise&#39;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
</code></pre></div>
<p>React has no way of knowing that the data didn’t change. Therefore, React needs to call <code>componentWillReceiveProps</code>, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).</p>

<p>You might think that React could just use smarter checks for equality, but there are some issues with this idea:</p>

<ul>
<li>The old <code>mydata</code> and the new <code>mydata</code> are actually the same physical object (only the object’s internal value changed). Since the references are triple-equals-equal, doing an equality check doesn’t tell us if the value has changed. The only possible solution would be to have created a deep copy of the data, and then later do a deep comparison - but this can be prohibitively expensive for large data structures (especially ones with cycles).</li>
<li>The <code>mydata</code> object might contain references to functions which have captured variables within closures. There is no way for React to peek into these closures, and thus no way for React to copy them and/or verify equality.</li>
<li>The <code>mydata</code> object might contain references to objects which are re-instantiated during the parent&#39;s render (ie. not triple-equals-equal) but are conceptually equal (ie. same keys and same values). A deep-compare (expensive) could detect this, except that functions present a problem again because there is no reliable way to compare two functions to see if they are semantically equivalent.</li>
</ul>

<p>Given the language constraints, it is sometimes impossible for us to achieve meaningful equality semantics. In such cases, React will call <code>componentWillReceiveProps</code> (even though the props might not have changed) so the component has an opportunity to examine the new props and act accordingly.</p>

<p>As a result, your implementation of <code>componentWillReceiveProps</code> MUST NOT assume that your props have changed. If you want an operation (such as a network request) to occur only when props have changed, your <code>componentWillReceiveProps</code> code needs to check to see if the props actually changed.</p>

</div>



      </div>
    

    <div class="pagination">
      
        <a href="/react/blog/page2/" class="previous">
          &laquo; Previous Page
        </a>
      
      
        <a href="/react/blog/page4/" class="next">
          Next Page &raquo;
        </a>
      
    </div>
  </div>
</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/react/" class="nav-home">
    </a>
    <div>
      <h5><a href="/react/docs/">Docs</a></h5>
      <a href="/react/docs/hello-world.html">Quick Start</a>
      <a href="/react/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/react/tutorial/tutorial.html">Tutorial</a>
      <a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Resources</a></h5>
      <a href="/react/community/conferences.html">Conferences</a>
      <a href="/react/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/react/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/react/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/react/js/anchor-links.js"></script>
  <script>
    

    

    
    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
